<template>
  <view>
    <Head
      :goback_custom="true"
      @gobackCustomMethod="$emit('closePopout', email_original)"
    >
      邮箱认证
    </Head>
    <view class="form_split_10"></view>
    <view class="notice_bar" v-if="email_original != ''">
      当前邮箱已验证，修改邮箱后您的登录邮箱将同步修改
    </view>
    <view class="log_wrapper">
      <view class="field_cell_group">
        <view class="field_cell">
          <label>
            <input
			placeholder-style="color:#757575;font-size:14px !important;" 
              class="log_field"
              type="text"
              placeholder="请输入新邮箱"
              v-model="newEmail"
              autocomplete="off"
            />
          </label>
        </view>
        <view class="field_cell">
          <label>
            <input
			placeholder-style="color:#757575;font-size:14px !important;" 
              class="log_field"
              type="number"
              placeholder="请输入验证码"
              v-model="code"
              autocomplete="off"
            />
          </label>
          <button class="log_get_btn" @click="sendEmail">
            {{ sendEmailBtnText }}
          </button>
        </view>
        <view class="btn_group">
          <u-button class="btn_mb" type="primary" shape="circle"  @click="handleSubmit" >
            提交
          </u-button>
        </view>
      </view>
    </view>
	<u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
import {mapState} from 'vuex'
export default {
  name: 'ResetEmail',
  props: ['email_original'],
  data () {
    return {
      checked: true,
      newEmail: '',
      code: '',
      regularEmail: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
    }
  },
  computed: {
  	...mapState({
		sendEmailBtnText: state=>state.sendEmailBtnText
	})
  },
  methods: {
    initCB () {},
    // 提交
    handleSubmit () {
      let that = this
      if (!this.newEmail) {
		this.$refs.uTips.show({
			title:'请填写邮箱',
			type: 'error'
		})
        return false
      }
      if (!this.regularEmail.test(this.newEmail)) {
		this.$refs.uTips.show({
			title:'邮箱格式不正确',
			type: 'error'
		})
        return false
      }
      if (this.newEmail === this.email_original) {
		this.$refs.uTips.show({
			title:'新邮箱与原邮箱相同',
			type: 'error'
		})
        return false
      }
      if (!this.code) {
		this.$refs.uTips.show({
			title:'请填写验证码',
			type: 'error'
		})
        return false
      }
      http
        .post(api.reset_email, {
          email: this.newEmail,
          code: this.code
        })
        .then(res => {
          if (parseInt(res.data.code) === 200) {
			this.$refs.uTips.show({
				title:res.data.message,
				type: 'success'
			})
            setTimeout(() => {
              that.$emit('closePopout', this.newEmail)
            }, 1500)
          } else {
			this.$refs.uTips.show({
				title:res.data.message,
				type: 'error'
			})
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 发送验证码
    sendEmail () {
      if (this.$store.state.sendEmailBtnDisabled) {
        return false
      }
      if (!this.newEmail) {
		this.$refs.uTips.show({
			title:'请输入邮箱',
			type: 'error'
		})
        return false
      }
      if (!this.regularEmail.test(this.newEmail)) {
		this.$refs.uTips.show({
			title:'邮箱格式不正确',
			type: 'error'
		})
        return false
      }
      if (this.email_original == this.newEmail) {
		this.$refs.uTips.show({
			title:'新邮箱与旧邮箱相同',
			type: 'error'
		})
        return false
      }
      this.$store
        .dispatch('sendEmailFun', {
          url: api.sendmail_bind,
          email: this.newEmail,
          type: this.$store.state.LoginType
        })
        .then(res => {
          if (res.code == 200) {
			this.$refs.uTips.show({
				title:this.$store.state.sendEmailMessage,
				type: 'success'
			})
          } else {
			this.$refs.uTips.show({
				title:this.$store.state.sendEmailMessage,
				type: 'error'
			})
            return false
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.notice_bar {
  width: 100%;
  padding: 22rpx 0 22rpx 70rpx;
  font-size: 12px;
  color: #ff6600;
  background: #fffbeb url($ImgUrl + "remind_ico.svg") 32rpx center no-repeat;
  background-size: 32rpx;
  margin-bottom: 30rpx;
}
.log_wrapper {
  width: 646rpx;
  margin: 34rpx auto;
}
.tx1 {
  padding: 110rpx 0 96rpx;
  font-size: 52rpx;
  color: #333333;
}
.field_cell {
  width: 100%;
  border-bottom: 2rpx solid #eeeeee;
  position: relative;
  margin-bottom: 40rpx;
}
.log_field {
  border: 0;
  width: 100%;
  display: block;
  color: #333333;
  font-size: 30rpx;
  padding: 14rpx 0;
  &::placeholder {
    color: #c9c9c9;
  }
}
.log_get_btn {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 0;
  padding: 14rpx 0;
  font-size: 30rpx;
  color: #c9c9c9;
  z-index: 20;
  background-color: #ffffff;
}
</style>
